<!--
* description: 维修工单-备件选择
* author:wzm
* createdDate:2020-1-25
-->

<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEdit"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="app-container app-container-table">
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-components="tableComponents"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="true"
          :dynamic-is-init-table="true"
          :dynamic-is-fix-choose="false"
          :dynamic-is-fix-index="false"
          :dynamic-is-show-more-btn="true"
          :dynamic-api-style="'restful'"
          :dynamic-table-defult-height="300"
          :is-show-pagination="true"
          :callback-obj="callbackObj"
        />
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'

import { vehiclePdiPriceInquirys } from '@/api/se/vehiclePdiPriceInquiry'
export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    popupsVisible: { type: Boolean, default: false },
    chosenPList: { type: Array, default: () => ([]) },
    dynamicEditRowData: { type: Object, default: () => ({}) },
    payKindList: { type: Object, default: () => ({}) }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'
    return {
      titleName: '备件选择',
      refundData: [],
      apiConfig: vehiclePdiPriceInquirys.querySpareParts,

      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.refundData = selection
          this.handleSelectionChange(selection)
        }
      },

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        },
        {
          compKey: 'btnKey3',
          size: 'small',
          clickEvent: () => this.select(),
          text: '选择',
          position: 'right',
          disabled: true
        }
      ],

      // 动态组件-查询条件
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'outPart',
              label: '是否外采',
              hidden: true
            },
            {
              prop: 'partNo',
              label: '备件编码',
              align: 'center'
            },
            {
              prop: 'partName',
              label: '备件名称',
              align: 'center'
            },
            {
              prop: 'purchasePrice',
              label: '单价',
              align: 'center'
            },

            {
              prop: 'SNP',
              label: '包装含量',
              align: 'center'
            },
            {
              prop: 'partRepairType',
              label: '备件类别',
              align: 'center'
            },
            {
              prop: 'carTypeCn',
              label: '适用车型',
              align: 'center'
            }
          ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '备件编码：',
              codeField: 'partNo',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },

            {
              compKey: 'compKey2',
              labelName: '备件名称：',
              codeField: 'partName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },

            {
              compKey: 'compKey3',
              labelName: '备件类别：',
              codeField: 'partRepairType',
              textField: 'partRepairTypeCn',
              component: () => import('@/components/org/commonSelect'),
              oFields: 'partRepairType,partRepairTypeCn',
              customObj: {
                api: vehiclePdiPriceInquirys.partRepairType, selectType: '1'
              },
              type: 'dropdownList',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '车型名称：',
              codeField: 'carTypeCn',
              component: () => import('@/components/org/commonInput'),
              disabled: true,
              type: 'inputText',
              span: 8,
              isMust: true
            }
          ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          partNo: '', // 备件编码
          partName: '', // 备件名称
          partRepairType: '', // 备件类别
          carTypeCode: '', // 适用车型
          carTypeCn: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  methods: {
    // 禁用上个弹窗已选择 数据
    getSelectable(row, index, ref) {
      if (this.payKindList.payKind === '1' && row.outPart === '0' || this.chosenPList.includes(row['partNo'])) {
        return false
      } else {
        return true
      }
    },
    open() {
      this.$nextTick(() => {
        this.queryTable(1)
      })
      this.formField.carTypeCn = this.dynamicEditRowData.carConfigCn
      this.formField.carTypeCode = this.dynamicEditRowData.carConfigCode
    },

    reset() {
      this.formField.partNo = ''
      this.formField.partName = ''
      this.formField.partRepairType = ''
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('close', false)
      this.clearData()
    },
    select() {
      this.refundData.forEach(element => {
        if (!element.repairModeId) {
          element.repairModeId = ''
        }
        element.partQty = 1
        element.outQty = 0
        element.partAmount = ''
        element.prePartAmount = ''
        element.comboSaleCode = ''
        element.note = ''
        element.isEntrustCode = ''
        element.isEntrust = ''
        element.repairTypeName = ''
        element.retRepairType = ''
        element.repairTypeCode = ''
      })
      this.$emit('refund-data', this.refundData)
      this.closeEdit()
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.tableButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    }
  }

}
</script>

<style lang="scss" scoped>

/deep/ .app-container label {
  display: inline-block;
  width: 100%;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  font-weight: normal !important;
  color: #333;
  border-radius: 2px;
  overflow: hidden;
  white-space: nowrap;
}
/deep/.el-input--small .el-input__inner {
    height: 24px;
    line-height: 24px;
    color: #333;
    padding-left: 8px;
}
/deep/ .el-input__prefix {
  top: 0px;
}
/deep/ .el-input__icon {
  line-height: 0;
}
/deep/ .app-container .el-col {
  margin-bottom: 0px;
}
</style>
